<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 页面标题 -->
    <div class="bg-white border-b border-gray-200 shadow-sm">
      <div class="container mx-auto px-4 py-5">
        <h1 class="text-2xl font-bold text-gray-800">AI生成全站</h1>
        <p class="text-gray-500 mt-1">通过AI一键生成完整的网站结构和内容</p>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="container mx-auto px-4 py-6">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 左侧：参数设置 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-lg shadow-sm p-5 sticky top-4">
            <h2 class="text-lg font-medium text-gray-800 mb-4">网站参数</h2>
            
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">网站名称</label>
                <input
                  type="text"
                  v-model="form.siteName"
                  class="form-input w-full"
                  placeholder="输入您的网站名称"
                >
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">网站类型</label>
                <select
                  v-model="form.siteType"
                  class="form-input w-full"
                >
                  <option value="corporate">企业官网</option>
                  <option value="ecommerce">电商网站</option>
                  <option value="blog">博客网站</option>
                  <option value="portfolio">作品集网站</option>
                  <option value="service">服务展示网站</option>
                  <option value="education">教育网站</option>
                  <option value="news">新闻媒体网站</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">核心业务/主题</label>
                <input
                  type="text"
                  v-model="form.mainTopic"
                  class="form-input w-full"
                  placeholder="输入您的核心业务或网站主题"
                >
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">目标受众</label>
                <select
                  v-model="form.audience"
                  class="form-input w-full"
                >
                  <option value="general">普通大众</option>
                  <option value="professionals">专业人士</option>
                  <option value="business">商业客户</option>
                  <option value="consumers">消费者</option>
                  <option value="students">学生群体</option>
                  <option value="tech">科技爱好者</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">网站风格</label>
                <select
                  v-model="form.style"
                  class="form-input w-full"
                >
                  <option value="modern" selected>现代简约</option>
                  <option value="classic">经典稳重</option>
                  <option value="vibrant">活力动感</option>
                  <option value="minimal">极简风格</option>
                  <option value="professional">专业商务</option>
                  <option value="creative">创意设计</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">网站语言</label>
                <select
                  v-model="form.language"
                  class="form-input w-full"
                >
                  <option value="chinese">中文</option>
                  <option value="english">英文</option>
                  <option value="bilingual">双语(中英文)</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">预设栏目</label>
                <div class="space-y-2">
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.categories"
                      value="home"
                      class="text-primary focus:ring-primary"
                      checked
                      disabled
                    >
                    <span class="ml-2 text-sm">首页</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.categories"
                      value="about"
                      class="text-primary focus:ring-primary"
                      checked
                    >
                    <span class="ml-2 text-sm">关于我们</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.categories"
                      value="products"
                      class="text-primary focus:ring-primary"
                      :checked="form.siteType !== 'blog' && form.siteType !== 'portfolio'"
                    >
                    <span class="ml-2 text-sm">产品/服务</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.categories"
                      value="news"
                      class="text-primary focus:ring-primary"
                      checked
                    >
                    <span class="ml-2 text-sm">新闻动态</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.categories"
                      value="cases"
                      class="text-primary focus:ring-primary"
                    >
                    <span class="ml-2 text-sm">案例展示</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.categories"
                      value="contact"
                      class="text-primary focus:ring-primary"
                      checked
                    >
                    <span class="ml-2 text-sm">联系我们</span>
                  </label>
                </div>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">额外要求</label>
                <textarea
                  v-model="form.requirements"
                  class="form-input w-full min-h-[100px]"
                  placeholder="输入网站布局或功能的特殊要求..."
                ></textarea>
              </div>
              
              <div class="pt-2">
                <button
                  class="btn btn-primary w-full flex items-center justify-center"
                  :disabled="loading || !form.siteName || !form.mainTopic"
                  @click="generateFullSite"
                >
                  <i v-if="loading" class="fa fa-spinner fa-spin mr-2"></i>
                  <span>生成全站</span>
                </button>
                <button
                  class="btn btn-secondary w-full mt-3"
                  @click="clearForm"
                >
                  重置参数
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧：生成结果 -->
        <div class="lg:col-span-2">
          <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 结果工具栏 -->
            <div class="bg-gray-50 px-5 py-3 border-b border-gray-200 flex flex-wrap items-center justify-between gap-3">
              <h2 class="text-lg font-medium text-gray-800">网站生成结果</h2>
              
              <div class="flex gap-2">
                <button
                  class="btn btn-secondary flex items-center"
                  :disabled="!siteStructure || loading"
                  @click="copyToClipboard"
                >
                  <i class="fa fa-copy mr-1"></i>复制
                </button>
                <button
                  class="btn btn-secondary flex items-center"
                  :disabled="!siteStructure || loading"
                  @click="exportSiteStructure"
                >
                  <i class="fa fa-download mr-1"></i>导出
                </button>
                <button
                  class="btn btn-primary flex items-center"
                  :disabled="!siteStructure || loading"
                  @click="generateFullSite"
                >
                  <i v-if="loading" class="fa fa-spinner fa-spin mr-1"></i>
                  <i v-else class="fa fa-refresh mr-1"></i>
                  重新生成
                </button>
              </div>
            </div>
            
            <!-- 结果内容区 -->
            <div class="p-5">
              <!-- 空状态 -->
              <div v-if="!siteStructure && !loading" class="py-16 text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                  <i class="fa fa-globe text-2xl text-gray-400"></i>
                </div>
                <h3 class="text-lg font-medium mb-2">尚未生成网站</h3>
                <p class="text-gray-500 max-w-md mx-auto">
                  设置左侧参数并点击"生成全站"按钮，AI将为您创建完整的网站结构和内容
                </p>
              </div>
              
              <!-- 加载状态 -->
              <div v-if="loading" class="py-16 text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                  <i class="fa fa-spinner fa-spin text-2xl text-primary"></i>
                </div>
                <h3 class="text-lg font-medium mb-2">AI正在生成网站</h3>
                <p class="text-gray-500 max-w-md mx-auto">
                  请稍候，AI正在根据您的需求创建完整的网站结构和内容...
                </p>
              </div>
              
              <!-- 生成结果 -->
              <div v-if="siteStructure && !loading" class="prose max-w-none">
                <h2 class="text-xl font-bold text-gray-800 mb-4">网站概览</h2>
                
                <div class="flex items-center text-sm text-gray-500 mb-6">
                  <span><i class="fa fa-clock-o mr-1"></i> 生成时间: {{ generateTime }}</span>
                  <span class="mx-3">|</span>
                  <span><i class="fa fa-sitemap mr-1"></i> 栏目数量: {{ siteStructure.categories.length }}</span>
                  <span class="mx-3">|</span>
                  <span><i class="fa fa-file-o mr-1"></i> 页面数量: {{ siteStructure.pages.length }}</span>
                </div>
                
                <!-- 网站信息 -->
                <div class="mb-8">
                  <h3 class="text-lg font-medium text-gray-800 mb-3">网站基本信息</h3>
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <span class="font-medium">网站名称:</span> {{ siteStructure.siteName }}
                      </div>
                      <div>
                        <span class="font-medium">网站类型:</span> {{ siteTypeMap[siteStructure.siteType] }}
                      </div>
                      <div>
                        <span class="font-medium">核心业务:</span> {{ siteStructure.mainTopic }}
                      </div>
                      <div>
                        <span class="font-medium">网站风格:</span> {{ styleMap[siteStructure.style] }}
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 网站结构 -->
                <div class="mb-8">
                  <h3 class="text-lg font-medium text-gray-800 mb-3">网站结构</h3>
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="tree-view">
                      <div v-for="category in siteStructure.categories" :key="category.id" class="tree-item mb-2">
                        <div class="flex items-center cursor-pointer" @click="toggleCategory(category.id)">
                          <i class="fa fa-folder text-primary mr-2"></i>
                          <span class="font-medium">{{ category.name }}</span>
                          <i class="fa fa-angle-down ml-2 text-xs" :class="{ 'transform rotate-180': category.expanded }" v-if="category.pages && category.pages.length"></i>
                        </div>
                        <div class="pl-6 mt-1" v-if="category.expanded && category.pages && category.pages.length">
                          <div v-for="page in category.pages" :key="page.id" class="flex items-center mb-1">
                            <i class="fa fa-file-text-o text-gray-500 mr-2"></i>
                            <span>{{ page.name }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 网站内容预览 -->
                <div>
                  <h3 class="text-lg font-medium text-gray-800 mb-3">内容预览</h3>
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <div v-html="siteContentPreview" class="text-gray-700"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 生成历史 -->
          <div class="bg-white rounded-lg shadow-sm mt-6">
            <div class="px-5 py-3 border-b border-gray-200">
              <h2 class="text-lg font-medium text-gray-800">生成历史</h2>
            </div>
            <div class="p-0">
              <div 
                v-for="(history, index) in generateHistory" 
                :key="index"
                class="px-5 py-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors"
                @click="loadHistory(history)"
              >
                <div class="font-medium text-gray-800 truncate">{{ history.siteName }}</div>
                <div class="flex items-center justify-between mt-1">
                  <span class="text-xs text-gray-500">{{ formatHistoryTime(history.timestamp) }}</span>
                  <span class="text-xs text-gray-500">{{ history.categories?.length || 0 }} 栏目, {{ history.pages?.length || 0 }} 页面</span>
                </div>
              </div>
              
              <div v-if="generateHistory.length === 0" class="px-5 py-8 text-center text-gray-500 text-sm">
                暂无生成历史
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { formatDate } from '@/utils/date'

// 表单数据
const form = ref({
  siteName: '',
  siteType: 'corporate',
  mainTopic: '',
  audience: 'general',
  style: 'modern',
  language: 'chinese',
  categories: ['home', 'about', 'news', 'contact'],
  requirements: ''
})

// 生成状态
const loading = ref(false)
const siteStructure = ref({
  categories: [],
  pages: []
})
const siteContentPreview = ref('')
const generateTime = ref('')
const generateHistory = ref([])
const expandedCategories = ref({})

// 映射表
const siteTypeMap = {
  'corporate': '企业官网',
  'ecommerce': '电商网站',
  'blog': '博客网站',
  'portfolio': '作品集网站',
  'service': '服务展示网站',
  'education': '教育网站',
  'news': '新闻媒体网站'
}

const styleMap = {
  'modern': '现代简约',
  'classic': '经典稳重',
  'vibrant': '活力动感',
  'minimal': '极简风格',
  'professional': '专业商务',
  'creative': '创意设计'
}

// 生成完整网站
const generateFullSite = async () => {
  if (!form.value.siteName || !form.value.mainTopic) return
  
  loading.value = true
  try {
    // 模拟AI生成过程
    await new Promise(resolve => setTimeout(resolve, 3000))
    
    // 生成网站结构
    const newSiteStructure = {
      siteName: form.value.siteName,
      siteType: form.value.siteType,
      mainTopic: form.value.mainTopic,
      style: form.value.style,
      timestamp: new Date().getTime(),
      categories: [],
      pages: []
    }
    
    // 生成栏目和页面
    let categoryId = 1
    let pageId = 1
    
    form.value.categories.forEach(categoryKey => {
      const categoryInfo = getCategoryInfo(categoryKey)
      if (categoryInfo) {
        const category = {
          id: categoryId++,
          key: categoryKey,
          name: categoryInfo.name,
          description: generateCategoryDescription(categoryInfo.name, form.value.mainTopic),
          pages: []
        }
        
        // 根据栏目生成页面
        categoryInfo.pages.forEach(pageInfo => {
          const page = {
            id: pageId++,
            key: pageInfo.key,
            name: pageInfo.name,
            description: generatePageDescription(pageInfo.name, form.value.mainTopic),
            content: generatePageContent(pageInfo.key, form.value)
          }
          category.pages.push(page)
          newSiteStructure.pages.push(page)
        })
        
        newSiteStructure.categories.push(category)
      }
    })
    
    // 生成内容预览
    const previewContent = generateContentPreview(newSiteStructure)
    
    // 更新结果
    siteStructure.value = newSiteStructure
    siteContentPreview.value = previewContent
    generateTime.value = new Date().toLocaleString()
    
    // 保存到历史记录
    saveToHistory(newSiteStructure)
    
  } catch (error) {
    console.error('生成网站失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取栏目信息
const getCategoryInfo = (categoryKey) => {
  const categoryMap = {
    'home': {
      name: '首页',
      pages: [{ key: 'home', name: '首页' }]
    },
    'about': {
      name: '关于我们',
      pages: [
        { key: 'about', name: '公司简介' },
        { key: 'team', name: '团队介绍' },
        { key: 'history', name: '发展历程' }
      ]
    },
    'products': {
      name: '产品/服务',
      pages: [
        { key: 'products', name: '产品列表' },
        { key: 'product-detail', name: '产品详情' }
      ]
    },
    'news': {
      name: '新闻动态',
      pages: [
        { key: 'news', name: '新闻列表' },
        { key: 'news-detail', name: '新闻详情' }
      ]
    },
    'cases': {
      name: '案例展示',
      pages: [
        { key: 'cases', name: '案例列表' },
        { key: 'case-detail', name: '案例详情' }
      ]
    },
    'contact': {
      name: '联系我们',
      pages: [{ key: 'contact', name: '联系我们' }]
    }
  }
  
  return categoryMap[categoryKey]
}

// 生成栏目描述
const generateCategoryDescription = (categoryName, mainTopic) => {
  return `${categoryName}是${form.value.siteName}的重要组成部分，展示了与${mainTopic}相关的${categoryName.includes('关于') ? '公司背景和发展情况' : categoryName.includes('产品') ? '核心产品和服务信息' : categoryName.includes('新闻') ? '最新动态和行业资讯' : categoryName.includes('案例') ? '成功案例和客户反馈' : categoryName.includes('联系') ? '联系方式和地理位置' : '重要内容'}`
}

// 生成页面描述
const generatePageDescription = (pageName, mainTopic) => {
  return `${pageName}页面是${form.value.siteName}的重要内容页面，用于展示${pageName.includes('简介') ? '公司的基本情况和发展理念' : pageName.includes('团队') ? '核心团队成员的专业背景' : pageName.includes('历程') ? '公司的发展历程和重要里程碑' : pageName.includes('列表') ? '相关内容的概览和导航' : pageName.includes('详情') ? '具体内容的详细信息' : pageName.includes('联系') ? '公司的联系方式和沟通渠道' : '重要信息'}`
}

// 生成页面内容
const generatePageContent = (pageKey, formData) => {
  // 根据页面类型生成内容
  if (pageKey === 'home') {
    return generateHomePageContent(formData)
  } else if (pageKey === 'about') {
    return generateAboutPageContent(formData)
  } else if (pageKey === 'products') {
    return generateProductsPageContent(formData)
  } else if (pageKey === 'news') {
    return generateNewsPageContent(formData)
  } else if (pageKey === 'contact') {
    return generateContactPageContent(formData)
  }
  return ''
}

// 生成首页内容
const generateHomePageContent = (formData) => {
  return `
    <div class="banner-section">
      <h2>${formData.siteName} - ${formData.mainTopic}专家</h2>
      <p>提供专业的${formData.mainTopic}解决方案，助力企业数字化转型</p>
      <div class="cta-buttons">
        <a href="#products">了解产品</a>
        <a href="#contact">联系我们</a>
      </div>
    </div>
    
    <div class="features-section">
      <h3>核心优势</h3>
      <div class="feature-items">
        <div class="feature-item">
          <i class="fa fa-check-circle"></i>
          <h4>专业团队</h4>
          <p>拥有多年行业经验的专业团队，为您提供优质服务</p>
        </div>
        <div class="feature-item">
          <i class="fa fa-rocket"></i>
          <h4>创新技术</h4>
          <p>不断创新的技术方案，满足您的多样化需求</p>
        </div>
        <div class="feature-item">
          <i class="fa fa-users"></i>
          <h4>客户至上</h4>
          <p>以客户需求为中心，提供个性化的解决方案</p>
        </div>
      </div>
    </div>
    
    <div class="news-section">
      <h3>最新动态</h3>
      <p>了解${formData.siteName}的最新消息和行业资讯</p>
    </div>
  `
}

// 生成关于我们页面内容
const generateAboutPageContent = (formData) => {
  return `
    <div class="about-intro">
      <h3>公司简介</h3>
      <p>${formData.siteName}是专业从事${formData.mainTopic}的企业，成立于${new Date().getFullYear() - Math.floor(Math.random() * 10) - 5}年，拥有丰富的行业经验和专业的技术团队。我们致力于为客户提供高质量的产品和服务，帮助客户实现业务增长和数字化转型。</p>
      <p>多年来，我们始终坚持以客户为中心的服务理念，不断创新和完善我们的产品和服务体系，赢得了广大客户的信任和支持。</p>
    </div>
    
    <div class="mission-vision">
      <div class="mission">
        <h4>企业使命</h4>
        <p>通过提供优质的${formData.mainTopic}产品和服务，为客户创造价值，推动行业发展</p>
      </div>
      <div class="vision">
        <h4>企业愿景</h4>
        <p>成为${formData.mainTopic}领域的领先企业，引领行业发展方向</p>
      </div>
    </div>
  `
}

// 生成产品服务页面内容
const generateProductsPageContent = (formData) => {
  return `
    <div class="products-intro">
      <h3>我们的产品与服务</h3>
      <p>${formData.siteName}提供全方位的${formData.mainTopic}产品和服务，满足不同客户的需求。</p>
    </div>
    
    <div class="product-list">
      <div class="product-item">
        <h4>核心产品/服务一</h4>
        <p>专业的${formData.mainTopic}解决方案，帮助客户解决实际问题，提升业务效率。</p>
      </div>
      <div class="product-item">
        <h4>核心产品/服务二</h4>
        <p>创新的${formData.mainTopic}技术，为客户提供更多可能性和竞争优势。</p>
      </div>
      <div class="product-item">
        <h4>核心产品/服务三</h4>
        <p>定制化的${formData.mainTopic}服务，根据客户需求提供个性化解决方案。</p>
      </div>
    </div>
  `
}

// 生成新闻动态页面内容
const generateNewsPageContent = (formData) => {
  return `
    <div class="news-intro">
      <h3>新闻动态</h3>
      <p>了解${formData.siteName}的最新动态和行业资讯</p>
    </div>
    
    <div class="news-list">
      <div class="news-item">
        <h4>${formData.siteName}发布新产品/服务</h4>
        <p class="news-date">${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}</p>
        <p>近日，${formData.siteName}正式发布了全新的${formData.mainTopic}产品/服务，旨在为客户提供更优质的体验和更多的价值...</p>
      </div>
      <div class="news-item">
        <h4>${formData.siteName}荣获行业奖项</h4>
        <p class="news-date">${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate() - 10).padStart(2, '0')}</p>
        <p>在近日举办的行业评选中，${formData.siteName}凭借卓越的${formData.mainTopic}产品和服务，荣获了"年度优秀企业"称号...</p>
      </div>
    </div>
  `
}

// 生成联系我们页面内容
const generateContactPageContent = (formData) => {
  return `
    <div class="contact-info">
      <h3>联系我们</h3>
      <p>如果您对我们的产品和服务有任何疑问或需求，欢迎随时与我们联系</p>
      
      <div class="contact-details">
        <div class="contact-item">
          <i class="fa fa-map-marker"></i>
          <span>地址：中国某某省某某市某某区某某路某某号</span>
        </div>
        <div class="contact-item">
          <i class="fa fa-phone"></i>
          <span>电话：400-123-4567</span>
        </div>
        <div class="contact-item">
          <i class="fa fa-envelope-o"></i>
          <span>邮箱：contact@${formData.siteName.toLowerCase().replace(/\s+/g, '')}.com</span>
        </div>
      </div>
    </div>
    
    <div class="contact-form">
      <h4>在线留言</h4>
      <form>
        <div class="form-group">
          <label>姓名</label>
          <input type="text" placeholder="请输入您的姓名">
        </div>
        <div class="form-group">
          <label>电话</label>
          <input type="tel" placeholder="请输入您的电话">
        </div>
        <div class="form-group">
          <label>邮箱</label>
          <input type="email" placeholder="请输入您的邮箱">
        </div>
        <div class="form-group">
          <label>留言内容</label>
          <textarea placeholder="请输入您的留言内容"></textarea>
        </div>
        <button type="submit">提交留言</button>
      </form>
    </div>
  `
}

// 生成内容预览
const generateContentPreview = (siteStructure) => {
  // 选择首页内容作为预览
  const homePage = siteStructure.pages.find(page => page.key === 'home')
  if (homePage && homePage.content) {
    return `<h3>首页内容预览:</h3>${homePage.content}`
  }
  return '<p>暂无内容预览</p>'
}

// 保存到历史记录
const saveToHistory = (siteData) => {
  const historyItem = {
    siteName: siteData.siteName,
    siteType: siteData.siteType,
    mainTopic: siteData.mainTopic,
    timestamp: new Date().getTime(),
    categories: siteData.categories,
    pages: siteData.pages,
    params: { ...form.value }
  }
  
  generateHistory.value.unshift(historyItem)
  
  // 限制历史记录数量
  if (generateHistory.value.length > 5) {
    generateHistory.value.pop()
  }
}

// 加载历史记录
const loadHistory = (history) => {
  // 恢复网站结构
  const restoredSite = {
    siteName: history.siteName,
    siteType: history.siteType,
    mainTopic: history.mainTopic,
    style: history.params.style,
    categories: history.categories,
    pages: history.pages
  }
  
  siteStructure.value = restoredSite
  siteContentPreview.value = generateContentPreview(restoredSite)
  generateTime.value = new Date(history.timestamp).toLocaleString()
  form.value = { ...history.params }
}

// 格式化历史时间
const formatHistoryTime = (timestamp) => {
  return formatDate(new Date(timestamp), 'yyyy-MM-dd HH:mm')
}

// 复制到剪贴板
const copyToClipboard = () => {
  if (!siteStructure.value) return
  
  // 将网站结构转换为JSON字符串
  const siteJson = JSON.stringify(siteStructure.value, null, 2)
  navigator.clipboard.writeText(siteJson)
    .then(() => {
      alert('网站结构已复制到剪贴板')
    })
    .catch(err => {
      console.error('复制失败:', err)
    })
}

// 导出网站结构
const exportSiteStructure = () => {
  if (!siteStructure.value) return
  
  // 将网站结构转换为JSON字符串
  const siteJson = JSON.stringify(siteStructure.value, null, 2)
  const blob = new Blob([siteJson], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `${siteStructure.value.siteName.replace(/\s+/g, '_')}_site_structure.json`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

// 清空表单
const clearForm = () => {
  form.value = {
    siteName: '',
    siteType: 'corporate',
    mainTopic: '',
    audience: 'general',
    style: 'modern',
    language: 'chinese',
    categories: ['home', 'about', 'news', 'contact'],
    requirements: ''
  }
}

// 切换栏目展开状态
const toggleCategory = (categoryId) => {
  expandedCategories.value[categoryId] = !expandedCategories.value[categoryId]
}
</script>

<style scoped>
.tree-view {
  font-size: 14px;
}

.tree-item {
  user-select: none;
}

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #4f46e5;
  color: white;
  border: none;
}

.btn-primary:hover:not(:disabled) {
  background-color: #4338ca;
}

.btn-primary:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #f9fafb;
}

.btn-secondary:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.prose {
  font-size: 14px;
  color: #374151;
}

.prose h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #111827;
}

.prose h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1f2937;
}
</style>